<template>
  <div class="page">
    <div class="title">
      <ul class="item">
        <li
          v-for="(item,index) in arr"
          :key="index"
          @click="Goto(item.id,index)"
          :class="[ index ==num ? 'active' : '']"
        >{{item.name}}</li>
      </ul>
    </div>
    <div class="boxsizes">

    <router-view :key="$route.fullPath"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "page",
  data() {
    return {
      num: "0",
      arr: [
        { name: "全部", id: "ask" },
        { name: "分享", id: "share" },
        { name: "招聘", id: "job" },
        { name: "问答", id: "good" }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    Goto(id, index) {
      this.num = index;
      this.$router.push({
        path: "/index/page/detlete",
        query: {
          id: id
        }
      });
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {}
};
</script>

<style scoped>
.title,
.page {
  width: 100%;
}
.item {
  background: seagreen;
  color: seashell;
  padding: 10px;
  display: flex;
  justify-content: space-evenly;
}
.active{
    color: red;
}
.boxsizes{
  border: 1px solid red;
}
</style>